<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        #box{
            width: 300px;
            height: 200px;
            background:url("img/2.png") no-repeat;
            position: absolute;
            left:0;
            top:0;
            display: none;
        }
        #dd{
            cursor: pointer;
            position: absolute;
        }
        .da{
            width: 100%;
            height: 1000px;

        }
    </style>
</head>
<body>
<input type="button" value="登录" id="dd">
<div class="da">
    <div id="box"></div>
</div>
</body>
</html>
    <script src="js/jquery-1.10.1.js"></script>
    <script>
        $(function () {
            $("#dd").click(function () {
                $("#box").show(function () {
                    $(".da").css({
                        background:"#ccc"
                    })
                });
                $("#box").click(function () {
                    $(".da,#box").hide();
                })
            })
            $(document).mouseover(function (e) {
                //获取x轴坐标
                var  disX = e.clientX - $("#box").outerWidth() / 2;
                //获取y轴坐标
                var  disY = e.clientY - $("#box").outerHeight() / 2;
                //将获取到的坐标的值赋给盒子left和top
                var l = $("#box").offset().left;
                var t = $("#box").offset().top;
                if(disX<0){
                    disX=0;
                }
                if(disX >$(window).width()-$("#box").outerWidth()){
                    disX=$(window).width()-$("#box").outerWidth();
                }
                if(disY<0){
                    disY=0;
                }
                if(disY>$(window).height()-$("#box").outerHeight()){
                    disY=$(window).height()-$("#box").outerHeight();
                }
                $("#box").css({
                    left :disX,
                    top :disY,
                })



            })
        })
    </script>
